<template>
	<view class="userHome">
		<view class="usertop" :style="{backgroundImage: 'url('+imageURL+')'}">
			<view class="homeDatails">
				<view class="tops">
					<view class="left" @tap="back()">
						<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
					</view>
					<view class="right">
						<image src="@/static/images/biji_ico_share@2x1.png" mode="widthFix"></image>
						<u-icon name="more-dot-fill" color="#fff" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="lst">
				<view>
					<text>{{userDetaile.fans}}</text>
					<text>粉丝</text>
				</view>
				<view>
					<text>{{userDetaile.followee}}</text>
					<text>关注</text>
				</view>
				<!-- <view>
					<text>125</text>
					<text>赞</text>
				</view> -->
			</view>
		</view>
		<view class="man">
			<view class="lt">
				<view class="avatar">
					<u-avatar src="" shape="circle" size="75"></u-avatar>
				</view>
				<view class="title">
					{{userDetaile.introduce}}
				</view>
			</view>
			<view class="rt">
				<button @tap="follow" v-html="guanzhu"></button>
			</view>
		</view>
		<view class="tit">
			<text>冰岛的长岛冰茶</text>
		</view>
		<view class="userBom">
			<view class="uCenterBom_tab">
				<text :class="tabCur==0?'active':''" @tap="clickCtTab(0)">笔记</text>
				<text :class="tabCur==1?'active':''" @tap="clickCtTab(1)">共同关注</text>
			</view>
			<view class="userBom_cont">
				<view class="userBom_cont_list" v-if="tabCur===0">
					<!-- 笔记 -->
					<notes :myNotes='myNotes'></notes>
				</view>
				<view class="userBom_cont_list" v-if="tabCur===1">
					<!-- 共同关注 -->
					<followCommon :commonList='commonList' :commonshow='commonshow'></followCommon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import notes from '@/components/notes.vue'
	import followCommon from './followcommon/followcommon.vue'
	export default {
		data() {
			return {
				guanzhu:'关注',
				isFollow:'',
				userId:0,
				tabCur:0,
				id: 1,
				myNotes:[],
				commonList:[],
				commonshow:false,
				imageURL:'../../static/images/1682066803582.jpg',
				userDetaile:{
					fans:0,
					followee:0,
					introduce:'描述'
				}
			}
		},
		onLoad() {
			this.blogOfMe();
			let pages = getCurrentPages();
			let len = pages.length;
			let curParam = pages[len - 1].options;
			this.id = curParam.id;
			// 用户详情
			this.userDetails(this.id)
			//判断是否 关注
			this.followOfNot();
			// 共同关注
			this.followcommon(this.id)
		},
		methods: {
			followOfNot(){
				console.log('this.userId的值，'+this.userId)
				uni.request({
					url:'/follow/or/not/'+this.userId,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						console.log('关注',obj.data.data)
						if(obj.data.data){
							this.guanzhu = "已关注"
							this.isFollow = true
						}else{
							this.guanzhu = '未关注'
							this.isFollow = false
						}
					}
				})
			},
			follow(){//不确定 字段 isFollow
				console.log(this.isFollow)
				uni.request({
					url:'/follow/'+this.userId+'/'+this.isFollow,
					method:'PUT',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj;
						console.log(data.data.success)
						if(data.data.success){
								this.guanzhu = "已关注"
								this.isFollow = true
						}else{
								this.guanzhu = '未关注'
								this.isFollow = false
						
						}
					}
				})
			},
			clickCtTab(num){
				console.log(`tab切换:tabCur`,num)
				this.tabCur = num;
			},
			blogOfMe(){
				let that = this;
				uni.request({
					url:'/blog/of/me',
					method:'get',
					data:{current:1},
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						if(obj.data.success){
							console.log('笔记',obj)
							that.myNotes = obj.data.data;
							
						}
					}
				})
			},
			followcommon(id){
				uni.request({
					url:'/follow/common/' + id,
					method:'get',
					header:{'Authorization':uni.getStorageSync('yystoken')},
					success: (obj) => {
						if(obj.data.success){
							console.log('共同关注',obj)
							this.commonList = obj.data.data
							if(this.commonList.length == 0){
								this.commonshow = false
							}else{
								this.commonshow = true
							}
						}
					}
				})
			},
			userDetails(id){
				uni.request({
					url:'user/info/' + id,
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'Authorization':uni.getStorageSync('yystoken')
					},
					success: (obj) => {
						console.log('用户详情',obj)
						if(obj.data.success){
							console.log(obj.data.data)
							if(obj.data.data==undefined){
								this.userDetaile={
									fans:'无',
									followee:'无',
									introduce:'无数据'
								}
								return
							}
							this.userDetaile = obj.data.data
						}
					}
				})
			},
			back(){
				uni.reLaunch({
					url:'/pages/home/home'
				})
			}
		},
		components:{
			notes,
			followCommon
		}
	}
</script>

<style lang="scss">
	.userBom{
		padding: 20rpx 30rpx 30rpx;
		.uCenterBom_tab{
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F0F0F0;
			text{
				font-size: 31rpx;
				color: #666;
				padding: 0 0 15rpx 0;
				margin-right: 60rpx;
				position: relative;
				&:last-child{
					margin-right: 0;
				}
				&.active{
					color: #222222;
					font-weight: bold;
					&::after{
						content: '';
						width: 38rpx;
						height: 8rpx;
						background: #16843F;
						border-radius: 4rpx;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
	.tit{
		color: #222222;
		font-size: 27rpx;
		padding: 0 30rpx;
	}
	.man{
		background-color: #fff;
		border-radius: 38rpx 38rpx 0rpx 0rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		top: -30rpx;
		.lt{
			display: flex;
			align-items: flex-end;
			position: relative;
			padding-left: 160rpx;
			.title{
				color: #999999;
				font-size: 23rpx;
				margin-left: 20rpx;
				margin-bottom: 10rpx;
			}
			.avatar{
				background-color: #FFFFFF;
				border-radius: 50%;
				box-shadow: 0 6px 9px 0px rgba(0, 0, 0, 0.2);
				position: absolute;
				bottom: 0;
				left: 0
			}
		}
		.rt{
			button{
				// width: 127rpx;
				height: 58rpx;
				line-height: 58rpx;
				background: #16843F;
				border-radius: 33rpx;
				font-weight: 500;
				color: #FFFFFF;
				font-size: 31rpx;
				margin-top: 20rpx;
			}
		}
	}
	.usertop{
		height: 300rpx;
		position: relative;
		.lst{
			display: flex;
			padding: 50rpx;
			justify-content: flex-end;
			position: absolute;
			width: 100%;
			bottom: 0;
			view{
				text-align: center;
				margin-left: 20rpx;
			}
			text{
				display: block;
				color: #fff;
				&:first-child{
					font-size: 35rpx;
					font-weight: bold;
				}
				&:last-child{
					font-size: 23rpx;
				}
			}
		}
	}
.homeDatails{
	position: absolute;
	top: 30rpx;
	width: 100%;
	left: 0;
	z-index: 33;
	
	.tops{
		display: flex;
		padding: 12rpx 50rpx;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				image{
					width: 60rpx;
					height: 60rpx;
					transform: rotate(90deg);
				}
			}
			.man{
				display: flex;
				align-items: center;
				image{
					width: 66rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}
				text{
					color: #222222;
					font-size: 27rpx;
				}
			}
		}
		.right{
			display: flex;
			align-items: center;
			image{
				width: 46rpx;
				margin-right: 36rpx;
			}
		}
	}
}
</style>
